<!DOCTYPE html>
<!-- thymeleaf支持 -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>区块链学院学生竞赛管理系统</title>
    <link rel="stylesheet" href="/res/css/pintuer.css">
    <link rel="stylesheet" href="/res/css/admin.css">
    <link rel="stylesheet" href="/res/layui/css/layui.css">
    <script src="/res/js/jquery.js"></script>
    <script src="/res/js/pintuer.js"></script>
    <script src="/res/layui/layui.js"></script>
</head>
<body style="background-color:#f2f9fd;">
<div class="header bg-main">
    <div class="logo margin-big-left fadein-top">
        <h1><img src="/res/images/y.jpg" class="radius-circle rotate-hover" height="50" alt="" />区块链学院学生竞赛管理系统
        </h1>
    </div>
    <div class="head-l" style="float: right">

        <a href="##" class="button button-little bg-blue">
            <span class="icon-wrench"></span> 清除缓存</a> &nbsp;&nbsp;
        <a class="button button-little bg-red" href="#">
            <span class="icon-power-off"></span> 退出登录</a>&nbsp;&nbsp;
    </div>
</div>
<div class="leftnav">
    <div class="leftnav-title"><strong><span class="icon-list"></span>菜单列表</strong></div>
    <h2><span class="icon-user"></span>基本设置</h2>
    <ul style="display:block">
        <li><a th:href="@{/getStudentByStuNo(stuNo=${stu.stuNo})}" target="_self"><span class="icon-caret-right"></span>个人信息</a></li>
        <li><a href="/showNotices" target="_self"><span class="icon-caret-right"></span>系统消息</a></li>
        <li><a th:href="@{/getAllFavoriteByUserNo(stuNo=${stu.stuNo})}" target="_self"><span class="icon-caret-right"></span>收藏列表</a></li>
        <li><a href="/stugetAllCompetitionsByPages" target="_self">
            <span class="icon-caret-right"></span>竞赛信息</a>
        </li>
        <li><a th:href="@{/selectAllApplicationsByStuNo(stuNo=${stu.stuNo})}" target="_self"><span class="icon-caret-right"></span>报名记录</a></li>
        <li><a href="#" target="_self"><span class="icon-caret-right"></span>上传备赛进度</a></li>
        <li><a href="/toAchievement" target="_self"><span class="icon-caret-right"></span>上传竞赛成果</a></li>


    </ul>

</div>
<script type="text/javascript">
    $(function() {
        $(".leftnav h2").click(function() {
            $(this).next().slideToggle(200);
            $(this).toggleClass("on");
        })
        $(".leftnav ul li a").click(function() {
            $("#a_leader_txt").text($(this).text());
            $(".leftnav ul li a").removeClass("on");
            $(this).addClass("on");
        })
    });
</script>
<ul class="bread">
    <li><a href="#" target="_self" class="icon-home"> 首页</a></li>
    <li><a href="##" id="a_leader_txt">网站信息</a></li>
    <li><b>当前语言：</b><span style="color:red;">中文</php></span>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;切换语言：<a href="##">中文</a> &nbsp;&nbsp;<a href="##">英文</a> </li>
</ul>

<div class="admin">

    <div class="layui-upload">
        <button type="button" class="layui-btn layui-btn-normal" id="ID-upload-demo-files">选择多文件</button>
        <div class="layui-upload-list">
            <table class="layui-table">
                <colgroup>
                    <col style="min-width: 100px;">
                    <col width="150">
                    <col width="260">
                    <col width="150">
                </colgroup>
                <thead>
                <th>文件名</th>
                <th>大小</th>
                <th>上传进度</th>
                <th>操作</th>
                </thead>
                <tbody id="ID-upload-demo-files-list"></tbody>
            </table>
        </div>
        <button type="button" class="layui-btn" id="ID-upload-demo-files-action">开始上传</button>
    </div>
    <script>
        layui.use(function(){
            var upload = layui.upload;
            var element = layui.element;
            var $ = layui.$;
            // 制作多文件上传表格
            var uploadListIns = upload.render({
                elem: '#ID-upload-demo-files',
                elemList: $('#ID-upload-demo-files-list'), // 列表元素对象
                url: '/upload', // 此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
                accept: 'file',
                multiple: true,
                number: 3,
                auto: false,
                bindAction: '#ID-upload-demo-files-action',
                choose: function(obj){
                    var that = this;
                    var files = this.files = obj.pushFile(); // 将每次选择的文件追加到文件队列
                    // 读取本地文件
                    obj.preview(function(index, file, result){
                        var tr = $(['<tr id="upload-'+ index +'">',
                            '<td>'+ file.name +'</td>',
                            '<td>'+ (file.size/1024).toFixed(1) +'kb</td>',
                            '<td><div class="layui-progress" lay-filter="progress-demo-'+ index +'"><div class="layui-progress-bar" lay-percent=""></div></div></td>',
                            '<td>',
                            '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>',
                            '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>',
                            '</td>',
                            '</tr>'].join(''));

                        // 单个重传
                        tr.find('.demo-reload').on('click', function(){
                            obj.upload(index, file);
                        });

                        // 删除
                        tr.find('.demo-delete').on('click', function(){
                            delete files[index]; // 删除对应的文件
                            tr.remove(); // 删除表格行
                            // 清空 input file 值，以免删除后出现同名文件不可选
                            uploadListIns.config.elem.next()[0].value = '';
                        });

                        that.elemList.append(tr);
                        element.render('progress'); // 渲染新加的进度条组件
                    });
                },
                done: function(res, index, upload){ // 成功的回调
                    var that = this;
                    // if(res.code == 0){ // 上传成功
                    var tr = that.elemList.find('tr#upload-'+ index)
                        ,tds = tr.children();
                    tds.eq(3).html(''); // 清空操作
                    delete this.files[index]; // 删除文件队列已经上传成功的文件
                    return;
                    //}
                    this.error(index, upload);
                },
                allDone: function(obj){ // 多文件上传完毕后的状态回调
                    console.log(obj)
                },
                error: function(index, upload){ // 错误回调
                    var that = this;
                    var tr = that.elemList.find('tr#upload-'+ index);
                    var tds = tr.children();
                    // 显示重传
                    tds.eq(3).find('.demo-reload').removeClass('layui-hide');
                },
                progress: function(n, elem, e, index){ // 注意：index 参数为 layui 2.6.6 新增
                    element.progress('progress-demo-'+ index, n + '%'); // 执行进度条。n 即为返回的进度百分比
                }
            });
        });
    </script>

</div>



</body>
</html>